Lesson: Using a Template to Create a Page

This lesson teaches you how to use a template to create an applet. You will be using a header template that is an ideal tool for quickly creating information to display along the top of a Web page. After you use Jamba to put finishing touches on the header, you will incorporate the . html file generated by Jamba into the top of an existing . html file set up to display text. When you finish putting the final . html file together, you'll be able to open and display it in a Web browser.

The Jamba header template you will use comes with four objects: a Graphic object, a Text object, a Timer object, and an Audio object. Although much of the work is done for you, you still need to customize and complete the set up of the objects. When complete, the Graphic will cycle through an animation. The Text object is display only. The Audio object will play immediately as the page displays.

Important: Make sure to complete every required step in this lesson (and in any other lessons you do later in the manual). Required steps are preceded with a bullet and the instructions appear bolded. Otherwise, the application will not perform as expected.

A completed version of this lesson, called lesn_3, is located in the \Jamba\lessons directory.

Open the Header1.JMB (EnterCyl) file located in \Jamba\Templates\Headers directory.
The new page appears in the Project window. You are ready to begin working on the objects.
- In the Project window, double-click on the EnterCycl page.
The EnterCycl page appears is the Page Layout Editor. The page contains a Timer object, a Graphic object, a Text object, and an Audio object. If all the objects are not immediately visible, you may need to reorganize the Page Layout Editor window.
- Maximize the Page Layout Editor. If you still can't see all the objects, drag the splitter bar (on the left side of the drawing area) over to the left to display more of the drawing area and less of the Object List.
Because the purpose of a template is to cut down on development time, most of the properties and methods are already set. However, you do have to customize each object to a certain extent so that it performs appropriately for this application. What follows is a brief explanation of each object and what you have to do to change it.
You'll start by customizing the Text object that serves as the title for the page.
- Right click on the Text object, and choose Properties... from the popup menu.
- Set the Text property to Jamba is Cool.
Because this Text object is meant to be a simple display-only title, there are no To Do List items for the Text object. You can move on to setting up the Audio object. The Audio object is already set up to play as soon as it is created.
- Click on Audio1 and click on the To Do List tab.
It's To Do List is set up so that a Create event causes Audio1 to play. The only task you have to do is specify the file to play.
- Click on the Properties tab.
Right now the Filename property is set to play Jamba.au . You'll change it to Logo2.au .
- Click in the Value field for the Filename property.
The Open dialog box appears.
- Find and select the Logo2.au audio file.
This file is in the \Jamba\lessons\Audio directory. Note that the PlayCount property is set to 1, so the audio file will play once. You'll change this value so that the file plays continuously.
- Set the PlayCount property to Infinite.
Now you'll take a look at the Graphic object. Before you make any changes, you will review how the object is set up by default.
- Click on the Graphic object.
This Graphic object is set up to cycle through several different images to create the illusion of motion. The file you load into the object is called an image strip. An image strip is a single graphic that contains all the images that make up the animation. Each image (called a cell) has to be the same height and width. The cells can be positioned in any number of rows and columns. For example, the following figure shows a graphic file that contains four cells in one row (a horizontal strip).

In another example, the following figure shows 12 cells organized into three rows of four columns.

Graphic1 is already set up to display a nine cell, one row graphic called Cycling4.gif. The following figure shows what Cycling4.gif looks like in its entirety.

Several properties have already been set to reflect the design of this graphic. For example, the NumberOfCells property is set to 9, the NumberOfColumns property is set to 9 and the NumberOfRows property is set to 1. You're going to load a different graphic called Cycle3.gif that is a graphic with nine cells, divided into three rows and three columns.
- Click on the Graphic object.
- Click in the Value field for the Filename property.
The Open dialog box appears.
- Find and select the cycle3.gif graphic file.
This file is in the \Jamba\lessons\Graphics directory.
- Click on OK to remove the Open dialog box and load the graphic into the object.
The object resizes to display the new graphic file. Because this graphic also contains nine cells you can leave the NumberOfCells property as is. However, because the cells are organized differently, you need to change the NumberOfColumns and NumberOfRows properties.
- Set the NumberOfColumns to 3 and the NumberOfRows to 3.
Given the information that you entered, Jamba automatically resizes the object to show just the first cell of the graphic. The object appears as follows.

Although this completes all of the customizing you need to do, you'll also take a quick look at how the Timer and Graphic object's work together in this application to start and stop the animation. First you'll look at the Timer object properties.
- Right click on the Timer object.
The Timer object controls the cycling of the Graphic object. Basically, the Timer object is set up to trigger an Alarm every 50 milliseconds and each time the Alarm goes off, the Timer's To Do List tells the Graphic object to display the next cell. Specifically, the Timer goes off every 50 milliseconds because its AlarmInterval property is set 50. The Timer continues to go off repeatedly because the RepeatCount property is set to Infinite.
Look at the Timer's To Do List to see how it advances the Graphic to the next cell.
- Click on the To Do List tab for the Timer object.
As shown in the preceding figure, when an Alarm event occurs (every 50 milliseconds) Graphic1 is set to go to the next image via the NextCell() method.
Now that you now how the Timer triggers the Graphic object, you need to look at one more key property in the Timer object.
- Click on the Properties tab for the Timer object.
Note that the AutoStart property is set to False. This means that the Timer does not start by itself, but rather, it must be triggered to start by some other event. If you were to set AutoStart to True, the Timer would start automatically and the Graphic animation would begin as soon as the page displays. However, this application is set up slightly differently. Basically, the animation only begins when the user moves the cursor over the Graphic object and it stops as soon as the cursor moves off of the object. The Graphic object's To Do List starts and stops the Timer. You need to take a final look at the Graphic object to see how this works.
- Click on the Graphic object and click on the To Do List tab.
The To Do List for the Enter event appears as follows.

This To Do List directs the Timer to start when the cursor enters the Graphic object. This causes the animation to begin when the user moves the cursor over the graphic. Now look at the To Do List for the Leave event.
- Select Leave from the event list.
This To Do List for the Leave event directs the Timer to stop when the cursor moves off of the Graphic object. Therefore, the animations halts when the user moves the cursor off of the graphic.
The header applet is complete and you can save it before you incorporate it into the main . html file to make the finished Web page.
- Select Save All from the File Menu.
Even though the application is just a header at this point, you'll try running it now.
- Try running the application by clicking on the Jamba Viewer button.
The Jamba Viewer runs the application.
- Exit the application and Jamba Viewer.
Now you will use Jamba's Copy Wizard to copy the entire project to another directory. This is the process you'll need to use later when you want to give your own applications to other authors or end-users. For example, you may want to use the Copy Wizard to put the project up on your Web site.
- Choose Copy Project... from the Project menu.
The wizard's first screen appears, asking if you want to copy the files in compressed or uncompressed format. By default, the files are sent uncompressed. You'll use this default.
- Click on the Next button.
The Next screen appears, asking you to enter the path to which you want to copy the project.
- Enter C:\ProgramFiles\Jamba\WebApp. (Hint: If Jamba is on a different drive, substitute C: with the appropriate drive letter, for example, D: or E:).
Jamba creates the necessary directory structure if it does not exist. Later when you are creating your own applications, you can use the Browse button to search for the appropriate directory.
- Click on the Finish button.
All the files used by the project are now in place and you can copy the contents of MyTemp.htm into the main . html file we have provided, called WebSamp.html.
- Exit Jamba.
- Copy WebSamp.html into the \Jamba\WebApp directory. Hint: WebSamp.html is in \Jamba\lessons.
- Open MyTemp.html file in your operating system's text editor.
The MyTemp.html appears as follows in Notepad:
- Copy and paste the entire MyTemp.html file into the top of WebSamp.html.
Save the edited version of WebSamp.html. You can now display the page in your Web browser.
- Run your Web browser, choose Open... from the File menu and open WebSamp.html.
The file appears with its Jamba-created header and the text below.
- To see an example of what the completed applet should look like, click on the Start button.
Back to Working With Templates

Up to Table of Contents